<template>
  <el-card class="auth">
    <!-- 标题 -->
    <div slot="header" class="qf-title">
      <span>权限列表</span>
      <el-button type="primary" round>创建</el-button>
    </div>
    <!-- 标题 -->

    <!-- 内容 -->
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>

    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}&nbsp;&nbsp;</span>
        <span>
          <!-- <el-button type="text" size="mini" @click="() => append(data)"> -->
          <el-button type="text" size="mini" @click="() => eidt(data)">
            编辑
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <!-- 内容 -->

    <!-- 页面组件 -->
    <editAuth ref="editAuthRef" :handleTableData="handleTableData" />
    <!-- 页面组件 -->
  </el-card>
</template>

<script>
import { getAuthApi, deleteAuthApi } from "@/api/auth";

export default {
  components: {
    editAuth: () => import("./components/editAuth.vue"),
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    eidt(row) {
      console.log("编辑：", row);
      this.$refs.editAuthRef.status = true;
      if (row.auth_pid != 0) {
        row.tmp = row.auth_pid + "_" + row.auth_pname;
      }
      this.$refs.editAuthRef.row = row;
    },
    remove(node, row) {
      this.confirm(async () => {
        // console.log("删除", row);
        // const res = await deleteUserApi({user_id: row.user_id})
        const res = await deleteAuthApi(row);
        if (res.meta.state === 200) {
          this.$message.success(res.meta.msg);
          this.handleTableData();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
      // console.log(node, row);
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // children.splice(index, 1);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async handleTableData() {
      const res = await getAuthApi();
      // console.log(res.data);
      this.data = res.data;
    },
  },

  created() {
    this.handleTableData();
  },

  data() {
    return {
      filterText: "",
      data: [],
      defaultProps: {
        children: "children", // 规定自己是哪个字段
        label: "auth_name", // 规定页面用哪个字段显示
      },
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-tree-node) {
  padding-top: 10px !important;
}
</style>
